<template>
  <div class="home">
    store.username:{{username}}
  </div>
  <div>
    <button @click="getFullNameHandle">获取全名</button>
    <button @click="changeName">修改名称</button>
    <button @click="toMap">查看地图</button>
  </div>

</template>
<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import appStore from '@/store'
import emitter from '@/utils/bus'
// 响应化解构
const { username } = storeToRefs(appStore.userStore);
const { getFullName, updateUserName } = appStore.userStore;

// 直接修改store里面的状态
username.value = 'dddd';

const getFullNameHandle = () => {
  ElMessage.success(getFullName());
};

// 通过action改变状态
const changeName = () => {
  updateUserName('哈哈哈哈哈哈');
};

const router = useRouter();
const toMap = () => {
  router.push('/map')
};

// 事件总线
emitter.on('form-children', (data: any) => {
  console.log(data)
})
</script>
<style lang="less">
.home {
  background-color: red
}

.box {
  width: 100px;
  height: 50px;
  background-color: blue;
}
</style>
